<template>
<view class="page">
	<view class="body"> 
		<view class="send-form-wrap">
			<view class="mod-grid m-b2">
				<view class="picker-btn" @click="showPopup('show','isShowZw')">
					<text class="f-wb">选择作物</text>
					<view class="">
						<text>{{params.crop_type_name||'请选择'}}</text>
						<text class="iconfont f-s28">&#xe8d4;</text>
					</view>						
				</view>				 
			</view>	
			<view class="mod-grid m-b2">
				<view class="label f-wb">描述您的问题</view>
				<textarea placeholder="输入您的问题,越详细专家解答越精确" class="textarea-describe" v-model="params.question"></textarea> 
				<!-- 图片 -->
				<view class="detail-wrap m-b2">
					<view class="upload-pic-item"> 
						<view class="form-upload-pic">
							<view class="img-item" v-for="(item,index) in params.local_files" :key="index">
								<image src="@/static/images/filter_bg.png" mode="widthFix" class="filter-bg"><!-- 占位 --></image>
								<view class="img-wrap">
									<image class="img" :src="item" mode="widthFix"></image>
								</view> 
								<view class="del-icon" @click="delPic(index)"><view class="iconfont">&#xe8b6;</view></view>
							</view>
							<view class="img-item add-btn" @click="uploadImage">
								<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
							</view>
						</view>	
						<view class="upload-pic-tips">*为了精确诊断，请至少添加2张不同角度图片</view>
					</view>
				</view>
			</view> 
			<view class="mod-grid m-b2">
				<view class="picker-wrap">
					<view class="picker-btn">
						<text class="f-wb">近期用肥用药情况</text>
						<view class="radio-wrapp">
							<view class="radio m-r2" @click="setPill(2)">								
								<text v-if="params.use_chem==2" class="icon iconfont f-s40 m-r1 f-green">&#xe604;</text>	
								<text v-else class="icon iconfont f-s40 m-r1 f-grey">&#xe6a6;</text>
								<view class="label">无</view>
							</view> 
							<view class="radio" @click="setPill(1)">
								<text v-if="params.use_chem==1" class="icon iconfont f-s40 m-r1 f-green">&#xe604;</text>	
								<text v-else class="icon iconfont f-s40 m-r1 f-grey">&#xe6a6;</text>								
								<view class="label">有</view>
							</view> 							
						</view>							
					</view> 
					<view v-if="params.use_chem==1">
						<view class="input-btn">
							<text class="f-wb m-r2">近期使用了</text>
							<view class="">
								<input type="text" placeholder="输入用肥/用药" v-model="params.chem_name"/> 
							</view>								
						</view> 
					</view>
				</view>	
				<view class="picker-wrap">
					<picker mode="selector" :range="square_types" range-key="name" @change="changeSquareTypes">
						<view class="picker-btn">
							<text class="f-wb">发生面积</text>
							<view class="">
								<text class="f-s28">{{params.square_type_name || '选择发生面积'}}</text>
								<text class="iconfont f-s28">&#xe8d4;</text>
							</view>	
							
						</view> 
					</picker>
				</view>	
				
				<view class="picker-wrap">
					<picker mode="selector" :range="weather_types" range-key="name" @change="changeWeatherTypes">
						<view class="picker-btn">
							<text class="f-wb">近期天气情况</text>
							<view class="">
								<text class="f-s28">{{params.weather_type_name||'选择天气情况'}}</text>
								<text class="iconfont f-s28">&#xe8d4;</text>
							</view>							
						</view> 
					</picker>
				</view>	
				
			</view>	
		</view>			
	</view>	
	<view class="footer">
		<view class="fix-wrap">
			<view class="btn" @click="submit">
				<view class="f-s32">发布问题</view> 
			</view>	
		</view>
	</view>	
	
	<view v-if="flag.isFullPage" class="full-fix-page">
		<template v-if="flag.isShowZw">
			<view class="picker-bottom-wrap a-fadeinB">
				<view class="picker-hd">
					<view class="cancle" @click="showPopup('hide');params.plant='';params.selectplant=''">取消</view>
					<view class="confirm" @click="confirmplant">确定</view>
				</view>
				<view class="scroll-y">
					<scroll-view scroll-y="true">
						<view class="list">
							<view class="item" :class="{'active':params.selectplant==item.id}" v-for="(item,index) in plants" :key="index" @click="selectplant(index)">
								<view class="icon"><image :src="web_host+'/static/icons/'+item.id+'.png'" mode="widthFix"></image></view>	
								<view class="name split">{{item.name}}</view>	
							</view>
						</view>				
					</scroll-view>
				</view>	 
			</view>
		</template>
	</view>
	
</view>
</template>

<script>  
import {HTTP_REQUEST_URL} from '../../config.js'
import {
		uploadImage,
		previewImage,
		uploadToServe 
	} from '@/common/util.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			loadingState:{
				default:true,
				loading:false,
				completed:false
			},
			plants:[], 
			square_types:[],
			weather_types:[], 
			params:{
				selectplant:'',
				selectplant_name:'',
				crop_type:'',
				crop_type_name:'',
				question:'',
				images:'',
				use_chem:'2',
				chem_name:'',
				square_type:'',
				square_type_name:'',
				weather_type:'' ,
				weather_type_name:'',
				local_files:[] 
			},
			flag:{
				isFullPage:false,
				isShowZw:false
			},
			web_host:HTTP_REQUEST_URL,
		}
	},
	async onShow() {
		
	},
	async onLoad(params) {  
		this.croptypes();
		this.squaretypes();
		this.weathertypes();
	},
	onReachBottom(){
		 
	},
	methods:{ 
		async croptypes(){
			let res=await this.$api.user_api.croptypes(); 
			if(res.data.code==0){
				this.plants=res.data.data;
			}
		}, 
		
		async squaretypes(){
			let res=await this.$api.user_api.squaretypes();
			console.log(res)
			if(res.data.code==0){
				this.square_types=res.data.data;
			}
		}, 
		
		changeSquareTypes(e){
			let item=this.square_types[e.detail.value];
			this.params.square_type=item.id;
			this.params.square_type_name=item.name;
		},		
		
		async weathertypes(){
			let res=await this.$api.user_api.weathertypes();
			console.log(res)
			if(res.data.code==0){
				this.weather_types=res.data.data;
			}
		}, 
		
		changeWeatherTypes(e){
			let item=this.weather_types[e.detail.value];
			this.params.weather_type=item.id;
			this.params.weather_type_name=item.name;
		},
		
		selectplant(idx){
			let item=this.plants[idx];
			this.params.selectplant=item.id; 
			this.params.selectplant_name=item.name
		},
		
		setPill(type){
			if(this.params.use_chem==type) return;
			this.params.use_chem=type;
			if(type==2){
				this.params.chem_name='';
			}
		},
		
		confirmplant(){
			this.params.crop_type=this.params.selectplant;
			this.params.crop_type_name=this.params.selectplant_name;
			this.showPopup('hide')
		},
		
		uploadImage: function() {
			// 上传现场照片
			let _this = this;
			uploadImage({
				length: _this.params.local_files.length,
				maxSize: 5,
				sourceType:['camera'],
				async success(res) {    
					_this.params.local_files=_this.params.local_files.concat(res.tempFilePaths); 
				}
			})
		},
		
		// 预览图片
		previewPic: function(index) {
			let _this = this;
			let preview_data = [];
			this.params.files.forEach(item => {
				preview_data.push(item.url);
			})
			previewImage({
				data: preview_data,
				index: index
			})
		},
		
		// 删除图片
		delPic: async function(index) { 
			this.params.local_files.splice(index, 1); 			
		},
		
		async submit(){ 
			let _this=this;
			let {crop_type,question,use_chem,chem_name,square_type,weather_type,local_files}=this.params; 
			if(crop_type==''){
				uni.showToast({
					icon:'none',
					mask:true,
					title:'请选择作物'
				})
				return
			}
			if(use_chem=='1'&&chem_name==''){
				uni.showToast({
					icon:'none',
					mask:true,
					title:'请输入用药名称'
				})
				return
			} 
			if(local_files.length<2){
				uni.showToast({
					icon:'none',
					mask:true,
					title:'请至少上传2张图片'
				})
				return
			} 
			 
			let res=await this.$api.user_api.askissue({
				crop_type,
				question,
				use_chem,
				chem_name,
				square_type,
				weather_type 
			});
			uni.showLoading({
				title:'数据提交中...'
			})
			if(res.data.code==0){ 
				let upload_num=0;
				this.params.local_files.forEach(item=>{
					uploadToServe({
						url: '/ask/upload',
						filePath: item,
						name: 'file',
						formData:{
							ask_id: res.data.data.ask_id
						}
					}).then((up_res) => {   
						if(up_res.code==0){
							upload_num+=1;
							if(upload_num==this.params.local_files.length){
								uni.hideLoading();
								uni.showToast({
									icon:'success',
									mask:true,
									title:'提交成功',
									success() {
										setTimeout(()=>{
											uni.navigateBack({
												delta:1
											})
											_this.$store.commit('wd_list_update',1);
										},500)
									}
								})
							} 
						}else{
							uni.showToast({
								icon:'error',
								mask:true,
								title:'登录已失效',
								duration:2000,
								success() {
									setTimeout(()=>{
										uni.reLaunch({
											url:'/pages/login/login'
										})
									},500)							
								}
							})	
						}
						 
						
					}).catch((err)=>{ 
					})
				}) 
			} 
		},
		
		// 打开弹窗
		showPopup(t, n) { 
			if (t == 'show') { 
				this.flag.isFullPage = true;
				this.flag[n] = true;
			} else if (t == 'hide') {
				if(n){ 
					this.flag[n] = false;
				}else{
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}					
			}
		},
		 
		
	},
	computed:{
		 
		
	},
	watch:{
		 
	},
	components:{ 
	}
}
</script>

<style scoped lang="less">
	.send-form-wrap{
		padding: 20rpx 0;
		width: 96%;
		margin: 0 auto;
	}
	.radio-wrapp{
		display: flex;
		align-items: center;
	}
	.picker-wrap{
		padding: 30rpx 0;
		border-bottom: 2rpx solid #eee;
	}
	.picker-btn{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx; 
	}
	.scroll-y{
		height: 630rpx;
		overflow: hidden; 
		scroll-view{
			height:100%;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 22%;
				height: 150rpx;
				margin: 0 10rpx 20rpx;
				background: #f5f5f5;
				border-radius: 8rpx;
				color: #666;
				font-size: 28rpx; 
				image{
					width: 50rpx;
					height: 50rpx;					
				}
				.name{
					width: 80%;
					text-align: center;
				}
			}
			.active{
				background: #00aa7f;
				color: #fff;
			}
		}
	}
	.input-btn{ 
		display: flex; 
		align-items: center;
		padding: 30rpx;
		margin: 30rpx 0 0 0;
		background: #f5f5f5;
		border-radius: 10rpx; 
		font-size: 32rpx; 
	}
	.mod-grid{ 		
		padding: 30rpx 30rpx 30rpx 30rpx;
		background: #fff;
		border-radius: 10rpx;
		.label{
			font-size: 32rpx;
		}
		.textarea-describe{
			width: 96%;
			padding: 10rpx 2%;
			margin: 20rpx 0;
			background: #f5f5f5;
			border-radius: 10rpx;
			font-size: 28rpx;
		}
		.upload-pic-item{
			padding: 0;
		}
		.list{
			.item{
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #eee;
				.icon{
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					background: #f5f5f5;
					border-radius: 10rpx;
				}
				.name{
					font-size: 30rpx;
					font-weight: bold;
				}
			}
			
		}
	}
	.list-wrap{ 
		display: flex;
		flex-wrap: wrap;
		padding:20rpx 1% 10rpx;
		.item{ 
			width: 48%;
			margin:0 1% 20rpx;  
			background:#fff;
			border-radius: 15rpx;
			overflow: hidden;
			.pic{
				width: 100%;
				image{
					width: 100%;
				}
			}
			.title{
				padding:0 10rpx;
				margin:20rpx 0;
				font-size: 28rpx;
			}
			.info{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:0 10rpx;
				margin-bottom: 10rpx;
				.price{ 
					i{
						font-size: 24rpx;
						font-style: initial;
					}
					font-size: 32rpx;
					color:#f00;
				}
				.sell-num{
					font-size:24rpx;
					color:#999;					 
				}
			}
		}
	}
	.footer{
		height: 150rpx;
		.fix-wrap{
			height: 150rpx;
			background: none;
			border: 0 none;
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 96%;
			height: 90rpx;
			margin: 20rpx auto;
			background: #00aa7f;
			border-radius: 8rpx;
			color: #fff;
			text-align: center;
		}
	}
	
</style>
